<template>
	<div class="thePage flex-column">
		<div class="header">
			<cube-tab-bar v-model="curTabIndex">
				<cube-tab v-for="(item, i) in tabs" :value="i" :key="i" :label="i">
					<div class="text">{{ item }}</div>
					<div class="flex-center mt8" v-show="curTabIndex === i" :class="`icon${i}`"></div>
				</cube-tab>
			</cube-tab-bar>
		</div>
		
		<div class="scroll overflow-y">
			<cube-tab-panels v-model="curTabIndex">
				<cube-tab-panel :value="0" :label="0">
					<div class="list">				
						<div class="item-box" v-for="(one, i) in list0" :key="i" @click="onNewsDetail(one)">
						<div class="news-title">{{ one.title }}</div>
						<div class="news-content">{{ one.content }}</div>
						<div class="news-attachment">
							<i class="iconfont icon-fujian"/>
							<span>{{ one.attachment }}</span>
						</div>
						<div class="news-line" />
						<div class="news-bottom">
							<div>发布人：{{ one.publisher }}</div>
							<div>{{ one.datetime }}</div>
						</div>
					</div>
					</div>
				</cube-tab-panel>
				<cube-tab-panel :value="1" :label="1">
					<div class="list">	
					<div class="item-box" v-for="(one, i) in list1" :key="i">
						<div class="news-title">{{ one.title }}</div>
						<div class="news-content">{{ one.content }}</div>
						<div class="news-attachment">
							<i class="iconfont icon-fujian"/>
							<span>{{ one.attachment }}</span>
						</div>
						<div class="news-line" />
						<div class="news-bottom ">
							<div>发布人：{{ one.publisher }}</div>
							<div>{{ one.datetime }}</div>
						</div>
					</div>
					</div>
				</cube-tab-panel>
				<cube-tab-panel :value="2" :label="2">
					<div class="list">	
					<div class="item-box" v-for="(one, i) in list2" :key="i">
						<div class="news-title">{{ one.title }}</div>
						<div class="news-content">{{ one.content }}</div>
						<div class="news-attachment">
							<i class="iconfont icon-fujian"/>
							<span >{{ one.attachment }}</span>
						</div>
						<div class="news-line" />
						<div class="news-bottom">
							<div>发布人：{{ one.publisher }}</div>
							<div>{{ one.datetime }}</div>
						</div>
					</div>
					</div>
				</cube-tab-panel>
			</cube-tab-panels>
		</div>		
	</div>
</template>

<script>
export default {
	name: 'News',
	components: {},
	data() {
		return {
			curTabIndex: 0,
			tabs: ['最新通知', '最新新闻', '企业咨询'],
			list0: [
				{
					title: '专升本辅导课开课通知',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '关于学院“专升本”培训班补报名事宜通知',
					content: '学院开办的“专升本”培训辅导班已于本学期10月正式开班复习。因2011年10月中旬新出台的《浙江省2012年 “专升本”考试实施细则》在考试内容上变化较大：非艺术类',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '大学英语等级考试三、四级考前培训辅导通知',
					content: '各位同学，为竭诚帮助大家顺利通过大学英语三、四级考试，取得佳绩，人文学院将于4月初开始至6月份开设考前辅导培训班，具体事宜可查阅招生简章。请同学们以班级为',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '关于学院“专升本”培训班补报名事宜通知',
					content: '学院开办的“专升本”培训辅导班已于本学期10月正式开班复习。因2011年10月中旬新出台的《浙江省2012年 “专升本”考试实施细则》在考试内容上变化较大：非艺术类',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '专升本辅导课开课通知',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '专升本辅导课开课通知',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '专升本辅导课开课通知',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '专升本辅导课开课通知',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				}
			],
			list1: [
				{
					title: '最新新闻11111',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '最新新闻2222',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				}
			],

			list2: [
				{
					title: '企业咨询1',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '企业咨询2',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				},
				{
					title: '企业咨询3',
					content: '专升本各辅导课于这周（第七周）开始，请各门课程的相关老师按已经确定的事件和地点上课，下附专升本各专业课程表',
					attachment: '专升本课程安排表.rar',
					publisher: '李思思',
					datetime: '2020-7-31 15:40'
				}
			]
		};
	},
	
	methods:{
		onNewsDetail(news){
			console.log(news)
			this.$router.push({name:"newsDetail"})
		}
	}
};
</script>

<style lang="less" scoped>
.header{
	// height:80px;
}
.cube-tab-bar{
	height: 60px;	
	background: #FFB651;	
	align-items: flex-start;
	.cube-tab{
		margin: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.text{
			margin-top: 10px;
			padding-top: 6px;
			font-size: 15px;
			font-weight: 500;
			color: white;
		}
		.icon0 {
			width: 24px;
			height: 6px;
			background: #fd8a23;
			border-radius: 3px;
			&::before {
				content: '';			
				width: 6px;
				height: 6px;
				background: #fd8a23;
				border-radius: 3px;
				position: relative;
				left: -20px;
			}
		}
		.icon1 {
			width: 30px;
			height: 6px;
			background: #fd8a23;
			border-radius: 3px;
		}
		.icon2 {
			width: 24px;
			height: 6px;
			background: #fd8a23;
			border-radius: 3px;
			&::after {
				content: '';
				width: 6px;
				height: 6px;
				background: #fd8a23;
				border-radius: 3px;
				position: relative;
				right: -20px;
			}
		}
	}	

	.cube-tab_active {
		background-color: white;
		border-radius: 15px 15px 0 0;
		.text{
			margin-top: 10px;
			color: #FE921E;
			font-weight: bold;
		}
	}
}

.scroll{
	margin: 20px 0px;
}	
.list{	
	.item-box{		
		.news-title{		
			font-size: 15px;		
			color: #1B1B1B;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			word-break: break-all;
		}
		.news-content{			
			font-size: 10px;			
			line-height: 14px;
			color: #B0B0B0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			word-break: break-all;
		}
		.news-attachment{			
			font-size: 10px;			
			text-decoration: underline;
			color: #FE921E;
		}
		.news-line{
			margin: 5px 0 ;
			border-bottom: 1px solid #DCDCDC;
		}
		.news-bottom{			
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 10px;
			color: #B0B0B0;
		}
	}
}

</style>
